<template>
	<view>
		<view class="green-header"></view>
		<view class="user-info" @click="personalinfo">
			<view class="left-info">
				<image :src="usericon ? usericon:autoimg" mode=""></image>
				<view class="xmzw">
					<view class="username">{{username.nickName}}</view>
					<view class="zhiwei">{{userzw.postGroup}}</view>
				</view>
			</view>
			<view class="right-info">
				<image src="../../static/rights.png" mode=""></image>
			</view>
		</view>
		<view class="change-password" @click="changepwd">
			<view class="change-left">
				<image src="../../static/changepwd.png" mode=""></image>
				<view class="change-text">修改密码</view>
			</view>
			<image class="change-right" src="../../static/trueright.png" mode=""></image>
		</view>
		<view class="change-password updata">
			<view class="change-left">
				<image src="../../static/updatad.png" mode=""></image>
				<view class="change-text">检查更新</view>
			</view>
			<image class="change-right" src="../../static/trueright.png" mode=""></image>
		</view>
		<view class="change-password about">
			<view class="change-left">
				<image src="../../static/aboutapp.png" mode=""></image>
				<view class="change-text">关于应用</view>
			</view>
			<image class="change-right" src="../../static/trueright.png" mode=""></image>
		</view>
		<view class="exit" @click="logout">退出登录</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfo: '',
				usericon:'',
				autoimg:'../../static/autoimg.png',
				username:'',
				userzw: '',
				
			}
		},
		onShow() {
			this.$request.get('/system/user/profile').then(res => {
				this.userinfo = res.data
				this.usericon = 'http://124.70.161.103:8080'+res.data.data.avatar
				this.username = res.data.data
				this.userzw = res.data
				
			})
		},
		methods: {
			// 个人详情
			personalinfo() {
				uni.setStorageSync("details_userinfo", this.userinfo)
				uni.navigateTo({
					url: "../personalinfo/personalinfo"
				})
			},
			// 修改密码
			changepwd() {
				uni.navigateTo({
					url: "../changepassword/changepassword"
				})
			},
			// 退出登录
			logout() {
				// 询问是否退出登录？
				uni.showModal({
					content: '是否要退出登录',
					success: (res) => {
						if (res.confirm) {
							console.log(res.confirm)
							let usertoken = uni.getStorageSync("usertoken")
							this.$request.post('/logout', {
								header: {
									'Authorization': usertoken
								},
							}).then(res => {
								console.log(res)
								if (res.data.code == 200) {
								uni.removeStorageSync('usertoken');
									uni.showToast({
										title: "退出成功",
										icon: 'success',
									})
									setTimeout(() => {
										//隐藏登录状态
										uni.navigateTo({
											url: "../index/index",
										});
									}, 2000)

								}
								if (res.data.code === 500) {
									uni.showToast({
										icon: "none",
										title: "服务器错误，请稍后再试"
									})
								}
							})
						}
					}
				})
			}
		},
		onLoad() {}
	}
</script>

<style lang="scss">
	* {
		// border: 1rpx solid;
	}

	page {
		background-color: #EFEFF4;
		position: fixed;
	}

	.green-header {
		height: 200rpx;
		background-color: #1E76FE;
		border-bottom-left-radius: 30rpx;
		border-bottom-right-radius: 30rpx;
	}

	.user-info {
		background-color: white;
		margin: -100rpx 30rpx 100rpx 30rpx;
		padding: 45rpx 30rpx;
		display: flex;
		border-radius: 20rpx;
		justify-content: space-between;

		.left-info {
			display: flex;

			image {
				width: 110rpx;
				border-radius: 100rpx;
				border: 4rpx solid #1F85EC;
				height: 110rpx;
			}

			.xmzw {
				margin: 10rpx 20rpx;

				.username {
					font-size: 32rpx;
					font-weight: 600;
					color: #1E76FE;
				}

				.zhiwei {
					font-size: 24rpx;
					margin-top: 10rpx;
					color: #9d9d9d;
					width: 300rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}

		.right-info {
			margin-top: 28rpx;

			image {
				width: 30rpx;
				height: 30rpx;
			}
		}
	}

	.change-password {
		display: flex;
		justify-content: space-between;
		background-color: white;
		padding: 20rpx 40rpx;

		.change-left {
			display: flex;

			image {
				width: 40rpx;
				height: 40rpx;
			}

			.change-text {
				font-size: 30rpx;
				margin-left: 20rpx;
			}
		}

		.change-right {
			width: 30rpx;
			height: 30rpx;
			margin-top: 5rpx;
		}
	}

	.updata {
		margin-top: 20rpx;
		margin-bottom: 2rpx;
	}

	.exit {
		background-color: white;
		font-size: 30rpx;
		color: red;
		text-align: center;
		padding: 20rpx 0;
		margin-top: 10rpx;
	}
</style>
